<template>
    <div ref="container">
        <a-modal :title="title" :width="width" :visible="visible" :confirmLoading="confirmLoading"
            :getContainer="() => $refs.container" :maskStyle="{ top: '93px', left: '154px' }"
            :wrapClassName="wrapClassNameInfo()" :mask="isDesktop()" :maskClosable="false" @ok="handleOk"
            @cancel="handleCancel" cancelText="关闭" style="top: 5%; height: 95%">
            <a-spin :spinning="confirmLoading">
                <div class="table-page-search-wrapper">
                    <!-- 按钮区域 -->
                    <a-form layout="inline">
                        <a-row :gutter="24">
                            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                                <a-col :md="12" :sm="24">
                                    <a-button @click="toggleChecked">
                                        {{ !checked ? '全选' : '全取消' }}
                                    </a-button>
                                    <a-button @click="editToggleChecked" style="margin-left: 8px">
                                        {{ !editChecked ? '全选-编辑' : '全取消-编辑' }}
                                    </a-button>
                                    <a-button @click="auditToggleChecked" style="margin-left: 8px">
                                        {{ !auditChecked ? '全选-审核' : '全取消-审核' }}
                                    </a-button>
                                    <a-button @click="unAuditToggleChecked" style="margin-left: 8px">
                                        {{ !unAuditChecked ? '全选-反审核' : '全取消-反审核' }}
                                    </a-button>
                                </a-col>
                            </span>
                        </a-row>
                    </a-form>
                </div>
                <!-- table区域-begin -->
                <div>
                    <a-table ref="table" size="middle" bordered rowKey="id" :pagination="false" :columns="columns"
                        :dataSource="dataSource" :loading="loading">
                        <span slot="action" slot-scope="text, record">
                            <a-checkbox v-if="record.pushBtn.indexOf(1) > -1" value="1"
                                :checked="record.btnStr ? record.btnStr.indexOf(1) > -1 : false"
                                @change="onChange(record, '1')">编辑</a-checkbox>
                            <a-checkbox v-if="record.pushBtn.indexOf(2) > -1" value="2"
                                :checked="record.btnStr ? record.btnStr.indexOf(2) > -1 : false"
                                @change="onChange(record, '2')">审核</a-checkbox>
                            <a-checkbox v-if="record.pushBtn.indexOf(7) > -1" value="7"
                                :checked="record.btnStr ? record.btnStr.indexOf(7) > -1 : false"
                                @change="onChange(record, '7')">反审核</a-checkbox>
                            <a-checkbox v-if="record.pushBtn.indexOf(3) > -1" value="3"
                                :checked="record.btnStr ? record.btnStr.indexOf(3) > -1 : false"
                                @change="onChange(record, '3')">导入导出</a-checkbox>
                            <a-checkbox v-if="record.pushBtn.indexOf(4) > -1" value="4"
                                :checked="record.btnStr ? record.btnStr.indexOf(4) > -1 : false"
                                @change="onChange(record, '4')">启用禁用</a-checkbox>
                            <a-checkbox v-if="record.pushBtn.indexOf(5) > -1" value="5"
                                :checked="record.btnStr ? record.btnStr.indexOf(5) > -1 : false"
                                @change="onChange(record, '5')">打印</a-checkbox>
                            <a-checkbox v-if="record.pushBtn.indexOf(6) > -1" value="6"
                                :checked="record.btnStr ? record.btnStr.indexOf(6) > -1 : false"
                                @change="onChange(record, '6')">作废</a-checkbox>
                            <a-checkbox v-if="record.pushBtn.indexOf(8) > -1" value="8"
                                :checked="record.btnStr ? record.btnStr.indexOf(8) > -1 : false"
                                @change="onChange(record, '8')">欠款</a-checkbox>
                            <a-checkbox v-if="record.pushBtn.indexOf(9) > -1" value="9"
                                :checked="record.btnStr ? record.btnStr.indexOf(9) > -1 : false"
                                @change="onChange(record, '9')">分配</a-checkbox>
                            <a-checkbox v-if="record.pushBtn.indexOf(10) > -1" value="10"
                                :checked="record.btnStr ? record.btnStr.indexOf(10) > -1 : false"
                                @change="onChange(record, '10')">发货</a-checkbox>
                        </span>
                    </a-table>
                </div>
            </a-spin>
        </a-modal>
    </div>
</template>
<script>
import pick from 'lodash.pick'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction } from '@/api/manage'
import { updateBtnStrByRoleId } from '@/api/api'
import { removeByVal } from '@/utils/util'
import { mixinDevice } from '@/utils/mixin'
export default {
    name: 'RolePushBtnModal',
    mixins: [JeecgListMixin, mixinDevice],
    data() {
        return {
            title: '操作',
            width: '800px',
            visible: false,
            model: {},
            checked: false,
            editChecked: false,
            auditChecked: false,
            unAuditChecked: false,
            disableMixinCreated: true,
            confirmLoading: false,
            form: this.$form.createForm(this),
            /* 数据源 */
            dataSource: [],
            // 表头
            columns: [
                {
                    title: '#',
                    dataIndex: '',
                    key: 'rowIndex',
                    width: 40,
                    align: 'center',
                    customRender: function (t, r, index) {
                        return parseInt(index) + 1
                    },
                },
                {
                    title: '名称',
                    align: 'center',
                    dataIndex: 'name',
                },
                {
                    title: '按钮列表',
                    dataIndex: 'action',
                    align: 'center',
                    scopedSlots: { customRender: 'action' },
                },
            ],
            url: {
                list: '/function/findRoleFunctionsById',
            },
        }
    },
    created() {},
    methods: {
        edit(roleId) {
            this.form.resetFields()
            this.model.id = roleId
            this.visible = true
            if (roleId) {
                getAction(this.url.list, { roleId: roleId }).then((res) => {
                    if (res.code === 200) {
                        this.dataSource = res.data.rows
                        this.ipagination.total = res.data.total
                    } else if (res.code === 400) {
                        this.dataSource = []
                        this.ipagination.total = 0
                    } else if (res.code === 500) {
                        this.$message.warning(res.data)
                    }
                    this.loading = false
                })
            }
        },
        close() {
            this.$emit('close')
            this.visible = false
        },
        handleCancel() {
            this.close()
        },
        handleOk() {
            const that = this
            // 触发表单验证
            this.form.validateFields((err, values) => {
                if (!err) {
                    that.confirmLoading = true
                    let funArray = this.dataSource
                    let bindArr = []
                    let btnStr = ''
                    for (let item of funArray) {
                        if (
                            item.btnStr !== undefined &&
                            item.btnStr !== '' &&
                            item.btnStr !== 'null' &&
                            item.btnStr !== null
                        ) {
                            let bindJSON = {}
                            bindJSON.funId = item.id
                            bindJSON.btnStr = item.btnStr
                            bindArr.push(bindJSON)
                        }
                    }
                    if (bindArr.length) {
                        btnStr = JSON.stringify(bindArr)
                    }
                    let obj = updateBtnStrByRoleId({ roleId: this.model.id, btnStr: btnStr })
                    obj.then((res) => {
                        if (res.code === 200) {
                            that.$emit('ok')
                        } else {
                            that.$message.warning(res.data)
                        }
                    }).finally(() => {
                        that.confirmLoading = false
                        that.close()
                    })
                }
            })
        },
        toggleChecked() {
            this.checked = !this.checked
            let funArray = this.dataSource
            if (this.checked) {
                for (let item of funArray) {
                    item.btnStr = item.pushBtn
                }
            } else {
                for (let item of funArray) {
                    item.btnStr = ''
                }
            }
        },
        editToggleChecked() {
            this.editChecked = !this.editChecked
            let funArray = this.dataSource
            if (this.editChecked) {
                for (let item of funArray) {
                    item.btnStr = this.parseArrByParam(1, item.btnStr, 1)
                }
            } else {
                for (let item of funArray) {
                    item.btnStr = this.parseArrByParam(1, item.btnStr, 0)
                }
            }
        },
        auditToggleChecked() {
            this.auditChecked = !this.auditChecked
            let funArray = this.dataSource
            if (this.auditChecked) {
                for (let item of funArray) {
                    item.btnStr = this.parseArrByParam(2, item.btnStr, 1)
                }
            } else {
                for (let item of funArray) {
                    item.btnStr = this.parseArrByParam(2, item.btnStr, 0)
                }
            }
        },
        unAuditToggleChecked() {
            this.unAuditChecked = !this.unAuditChecked
            let funArray = this.dataSource
            if (this.unAuditChecked) {
                for (let item of funArray) {
                    item.btnStr = this.parseArrByParam(7, item.btnStr, 1)
                }
            } else {
                for (let item of funArray) {
                    item.btnStr = this.parseArrByParam(7, item.btnStr, 0)
                }
            }
        },
        /**
         * 格式转换，控制按钮的显示或隐藏
         * @param param
         * @param btnStr
         * @param type
         * @returns {string}
         */
        parseArrByParam(param, btnStr, type) {
            if (type) {
                btnStr = btnStr + ','
                if (btnStr.indexOf(param + ',') === -1) {
                    btnStr = btnStr + param + ','
                }
            } else {
                btnStr = btnStr + ','
                if (btnStr.indexOf(param + ',') > -1) {
                    btnStr = btnStr.replace(param + ',', '')
                }
            }
            if (btnStr) {
                btnStr = btnStr.replace('null', '')
                btnStr = btnStr.substring(0, btnStr.length - 1)
                if (btnStr.substring(0, 1) === ',') {
                    btnStr = btnStr.substring(1)
                }
            }
            return btnStr
        },
        onChange(record, value) {
            let funArray = this.dataSource
            for (let item of funArray) {
                if (item.id === record.id) {
                    let btnStr = record.btnStr
                    if (btnStr) {
                        let btnArr = btnStr.split(',')
                        if (btnStr.indexOf(value) > -1) {
                            //去掉勾选
                            removeByVal(btnArr, value)
                            item.btnStr = btnArr.join()
                        } else {
                            //勾选
                            btnArr.push(value)
                            item.btnStr = btnArr.join()
                        }
                    } else {
                        let btnArr = []
                        //勾选
                        btnArr.push(value)
                        item.btnStr = btnArr.join()
                    }
                }
            }
        },
    },
}
</script>
<style scoped>
</style>